{% extends "admin/admin_base.html" %}

{% block title %}系统设置{% endblock %}
{% block breadcrumb %}系统设置{% endblock %}

{# 引入必要样式（保持你原有的样式 + Bootstrap Tab 基础样式） #}
{% block head %}
{{ super() }}
<!-- Bootstrap Toggle 开关组件 CSS（你原有） -->
<link href="/static/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
<!-- Bootstrap Tab 组件无需额外 CSS（Bootstrap 核心已包含） -->
<style>
/* 1. 配置卡片样式（与API统计页面保持一致） */
.config-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    overflow: hidden;
}

/* 卡片标题栏 */
.config-card-header {
    padding: 16px 24px;
    border-bottom: 1px solid #E5E6EB;
    font-size: 16px;
    font-weight: 600;
    color: #1D2129;
}

/* 配置表单容器 */
.config-form {
    padding: 24px;
}

/* 单个配置项布局 */
.config-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F5F7FA;
}

/* 配置项标签（名称+提示） */
.config-label {
    width: 220px;
    flex-shrink: 0;
}
.config-label .title {
    font-size: 14px;
    color: #1D2129;
    margin-bottom: 4px;
}
.config-label .tip {
    font-size: 12px;
    color: #6B7785;
}

/* 配置项输入区域 */
.config-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}


/* 保存按钮样式（与现有按钮风格统一） */
.save-btn {
    padding: 6px 16px;
    font-size: 14px;
    background-color: #165DFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.save-btn:hover {
    background-color: #0E4BD8;
}

/* 2. Tab 布局新增样式 */
/* Tab 导航栏样式（与你的卡片风格统一） */
.nav-tabs {
    border-bottom: 1px solid #E5E6EB;
    margin-bottom: 24px;
}
.nav-tabs .nav-item {
    margin-bottom: -1px;
}
.nav-tabs .nav-link {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7785;
    border: 1px solid transparent;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    transition: all 0.3s ease;
}
/* 激活态 Tab 样式 */
.nav-tabs .nav-link.active {
    color: #165DFF;
    background-color: #fff;
    border-color: #E5E6EB #E5E6EB #fff;
    box-shadow: 0 2px 0 -1px #165DFF;
}
.nav-tabs .nav-link:hover:not(.active) {
    color: #165DFF;
    border-color: #E5E6EB #E5E6EB transparent;
}

/* 3. 管理配置 Tab 的表格样式 */
.config-table {
    width: 100%;
    margin-bottom: 1rem;
    color: #1D2129;
    border-collapse: collapse;
}
.config-table th, .config-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #F5F7FA;
}
.config-table th {
    font-weight: 600;
    color: #6B7785;
    background-color: #F9FAFB;
}
.config-table tbody tr:hover {
    background-color: #F9FAFB;
}
/* 表格操作按钮样式 */
.table-btn {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}
.btn-edit {
    background-color: #E6F4FF;
    color: #165DFF;
}
.btn-edit:hover {
    background-color: #D1E9FF;
}
.btn-delete {
    background-color: #FFFFFF;
    color: #f53f3f;
    border: 1px solid #f84c4c;
}
.btn-delete:hover {
    background-color: #f53f3f;
    color: #FFFFFF;
}
.btn-open {
    background-color: #FFFFFF;
    color: #00b42a;
    border: 1px solid #00b42a;
}
.btn-open:hover {
    background-color: #00b42a;
    color: #FFFFFF;
}

/* 4. 新建配置 Tab 的表单样式 */
.create-form .form-group {
    margin-bottom: 20px;
}
.create-form .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #1D2129;
}
.create-form .form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}
.create-form .form-control:focus {
    outline: none;
    border-color: #165DFF;
    box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
}
.create-form .form-text {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6B7785;
}
/* 表单提交按钮 */
.submit-btn {
    padding: 8px 24px;
    font-size: 14px;
    background-color: #165DFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.submit-btn:hover {
    background-color: #0E4BD8;
}
.config-status {
    float: right;
}

.config-status .btn{
    padding: 0.2rem 1.65rem;
    margin-bottom: 8px;

}

.custom-readonly {
    background-color: #e9ecef;  /* 自定义背景色 */
    color: #212529;            /* 文字颜色 */
    border: 1px solid #adb5bd; /* 边框 */
    cursor: not-allowed;       /* 鼠标显示禁用符号 */
    opacity: 1;                /* 覆盖默认的透明度 */
}

/* 5. 响应式适配（补充 Tab 和表格的小屏幕适配） */
@media (max-width: 768px) {
    /* 小屏幕下 Tab 导航换行 */
    .nav-tabs .nav-link {
        padding: 8px 16px;
        font-size: 13px;
    }
    /* 配置项改为纵向排列 */
    .config-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .config-label {
        width: 100%;
        margin-bottom: 8px;
    }
    .config-input {
        width: 100%;
        flex-wrap: wrap;
    }
    /* 小屏幕下表格横向滚动 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 表单输入框宽度适配 */
    .create-form .form-control {
        width: 100% !important;
    }
}
</style>
{% endblock %}

{% block content %}
<!-- 提示弹窗（保留你原有） -->
<div class="toast" id="toast"></div>

<!-- 核心：Tab 组件容器 -->
<div class="tab-container">
    <!-- 1. Tab 导航栏（系统设置 + 管理配置 + 新建配置） -->
    <ul class="nav nav-tabs" id="configTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="system-config-tab" data-bs-toggle="tab"
                    data-bs-target="#system-config" type="button" role="tab"
                    aria-controls="system-config" aria-selected="true">
                系统设置
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="manage-config-tab" data-bs-toggle="tab"
                    data-bs-target="#manage-config" type="button" role="tab"
                    aria-controls="manage-config" aria-selected="false">
                管理配置
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="create-config-tab" data-bs-toggle="tab"
                    data-bs-target="#create-config" type="button" role="tab"
                    aria-controls="create-config" aria-selected="false">
                新建配置
            </button>
        </li>
    </ul>

    <!-- 2. Tab 内容区（三个 Tab 对应的页面） -->
    <div class="tab-content" id="configTabContent">
        <!-- ====================== Tab 1：系统设置（你原有内容） ====================== -->
        <div class="tab-pane fade show active" id="system-config" role="tabpanel"
             aria-labelledby="system-config-tab">
            <!-- 循环渲染配置分组卡片（保留你原有逻辑） -->
            {% for typeid, configs in config_groups.items() if configs %}
            <div class="config-card">
                <div class="config-card-header">
                    {{ group_titles[typeid] }}
                </div>
                <div class="config-form">
                    {% for cfg in configs %}
                    <div class="config-item">
                        <div class="config-label">
                            <div class="title">{{ cfg.title }}</div>
                            <div class="tip">{{ cfg.tip }}</div>
                        </div>
                        <div class="config-input">
                            {% if cfg.field in ["config_wxpay", "config_alipay", "config_kamipay"] %}
                            <!-- 支付开关 -->
                            <input
                                type="checkbox"
                                class="config-toggle"
                                data-field="{{ cfg.field }}"
                                {% if cfg.data =='1' %}checked{% endif %}
                                data-on="开启"
                                data-off="关闭"
                                data-onstyle="success"
                                data-offstyle="danger"
                            >
                            {% elif cfg.field in ["config_free_api", "config_month_api", "config_season_api", "config_year_api"] %}
                            <!-- 调用次数输入框 -->
                            <input
                                type="number"
                                class="form-control config-input-text"
                                data-field="{{ cfg.field }}"
                                value="{{ cfg.data }}"
                                min="0"
                                style="width: 200px;"
                            >
                            <button class="save-btn" data-field="{{ cfg.field }}">保存</button>
                            {% elif cfg.field in ["config_month_price", "config_season_price", "config_year_price"] %}
                            <!-- 会员价格输入框 -->
                            <input
                                type="number"
                                class="form-control config-input-text"
                                data-field="{{ cfg.field }}"
                                value="{{ cfg.data }}"
                                min="0"
                                step="0.01"
                                style="width: 200px;"
                            >
                            <button class="save-btn" data-field="{{ cfg.field }}">保存</button>
                            {% else %}
                            <!-- 普通文本输入框（如系统名称、版权信息） -->
                            <input
                                type="text"
                                class="form-control config-input-text"
                                data-field="{{ cfg.field }}"
                                value="{{ cfg.data }}"
                                style="width: 300px;"
                            >
                            <button class="save-btn" data-field="{{ cfg.field }}">保存</button>
                            {% endif %}
                            <!-- 预留：后续添加“编辑”按钮 -->
                            <button class="table-btn btn-edit" data-field="{{ cfg.field }}" style="display: none;">编辑</button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- ====================== Tab 2：管理配置（所有配置项列表） ====================== -->
        <div class="tab-pane fade" id="manage-config" role="tabpanel"
             aria-labelledby="manage-config-tab">
            <div class="config-card">
                <div class="config-card-header">
                    配置项管理（可编辑/删除/调整排序）
                <div class="btn-group config-status">
                    <a href="/admin/system_config?tab=manage" class="btn {% if not current_status %}btn-primary{% else %}btn-outline-primary{% endif %}">全部</a>
                    <a href="/admin/system_config?tab=manage&status=1" class="btn {% if current_status == 1 %}btn-success{% else %}btn-outline-success{% endif %}">启用</a>
                    <a href="/admin/system_config?tab=manage&status=0" class="btn {% if current_status == 0 %}btn-danger{% else %}btn-outline-danger{% endif %}">禁用</a>
                </div>


                </div>
                <div class="config-form">
                    <!-- 表格：展示所有配置项 -->
                    <div class="table-responsive">
                        <table class="config-table">
                            <thead>
                                <tr>
                                    <th>配置字段名</th>
                                    <th>配置名称</th>
                                    <th>所属分组</th>
                                    <th>排序</th>
                                    <th>当前值</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 循环渲染所有配置项（后续对接后端数据） -->
                                {% for typeid, configs in config_groups.items() if configs %}
                                    {% for cfg in configs %}
                                    <tr>
                                        <td>{{ cfg.field }}</td>
                                        <td>{{ cfg.title }}</td>
                                        <td>{{ cfg.typeid }}-{{ group_titles[typeid] }}</td>
                                        <td>{{ cfg.orders }}</td>
                                        <td>
                                            <!-- 特殊处理：文件类型（如Logo）显示“[图片]”，文本类型显示值 -->
                                            {% if cfg.data.startswith("/static/upload/config/") %}
                                            <span class="badge bg-primary">[图片文件]</span>
                                            {% else %}
                                            {{ cfg.data | truncate(20) }}  <!-- 超长值截断显示 -->
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if cfg.status == 1 %}
                                            <span class="badge btn btn-success">启用</span>
                                            {% else %}
                                            <span class="badge btn btn-danger">禁用</span>
                                            {% endif %}

                                        </td>
                                        <td>
                                            <button class="table-btn btn-edit" data-field="{{ cfg.field }}">
                                                编辑
                                            </button>
                                            <button class="btn-change table-btn
                                                {% if cfg.status ==1 %}
                                                    btn-delete
                                                {% else %}
                                                    btn-open
                                                {% endif %}"
                                                    data-id="{{ cfg.id }}"
                                                    data-field="{{ cfg.field }}"
                                                    data-status="{{ cfg.status }}">
                                                {% if cfg.status ==1 %}禁用{% else %}开启{% endif %}
                                            </button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                {% else %}
                                <!-- 无配置项时显示 -->
                                <tr>
                                    <td colspan="6" class="text-center py-4 text-muted">
                                        暂无配置项
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- 预留：排序调整功能（后续实现） -->
                    <div class="mt-4">
                        <button class="save-btn" id="sortConfigBtn" style="display: none;">
                            保存排序
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- ====================== Tab 3：新建配置（表单） ====================== -->
        <div class="tab-pane fade" id="create-config" role="tabpanel"
             aria-labelledby="create-config-tab">
            <div class="config-card">
                <div class="config-card-header">
                    新增配置项
                </div>
                <div class="config-form">
                    <!-- 新增配置表单 -->
                    <form class="create-form" id="createConfigForm">
                        <!-- 1. 配置字段名（唯一） -->
                        <div class="form-group">
                            <label class="form-label" for="createField">
                                配置字段名 <span class="text-danger">*</span>
                            </label>

                            <input type="text" class="form-control" id="createField" name="field"
                                   placeholder="如 config_logo、config_copyright（仅字母/数字/下划线）"
                                   maxlength="50" required>
                            <div class="form-text">
                                字段名唯一，用于标识配置（创建后不可修改）
                            </div>
                        </div>

                        <!-- 2. 配置名称 -->
                        <div class="form-group">
                            <label class="form-label" for="createTitle">
                                配置名称 <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="createTitle" name="title"
                                   placeholder="如 系统Logo、版权信息" maxlength="100" required>
                        </div>

                        <!-- 3. 填写提示 -->
                        <div class="form-group">
                            <label class="form-label" for="createTip">
                                字段提示
                            </label>
                            <input type="text" class="form-control" id="createTip" name="tip"
                                   placeholder="如 注意事项、备注等……" maxlength="255">
                        </div>

                        <!-- 4. 所属分组 -->
                        <div class="form-group">
                            <label class="form-label" for="createGroup">
                                所属分组 <span class="text-danger">*</span>
                            </label>
                            <select class="form-control" id="createGroup" name="typeid" required>
                                <option value="1">1 - 系统基础设置</option>
                                <option value="2">2 - 调用次数限制</option>
                                <option value="3">3 - 会员价格设置</option>
                                <option value="4">4 - 支付方式设置</option>
                                <option value="5">5 - 其它设置</option>
                            </select>
                        </div>

                        <!-- 5. 排序号 -->
                        <div class="form-group">
                            <label class="form-label" for="createOrder">
                                排序 <span class="text-danger">*</span>
                            </label>
                            <input type="number" class="form-control" id="createOrder" name="orders"
                                   value="0" min="0" required>
                            <div class="form-text">
                                同分组内排序号越小越靠前，默认 0（最靠前）
                            </div>
                        </div>

                        <!-- 提交按钮 -->
                        <button type="button" class="submit-btn" id="submitCreateBtn">
                            提交新增
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 编辑配置模态框 -->
<div class="modal fade" id="editConfigModal" tabindex="-1" aria-labelledby="editConfigModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editConfigModalLabel">编辑配置项</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="create-form" id="editConfigForm">
                    <div class="form-group">
                        <label class="form-label">配置字段名</label>
                        <input type="text" class="form-control  custom-readonly" id="editField" name="field" readonly>

                    </div>
                    <div class="form-group">
                        <label class="form-label">配置名称</label>
                        <input type="text" class="form-control  custom-readonly" id="editTitle" name="title" readonly>
                    </div>
                    <!--
                    <div class="form-group">
                        <label class="form-label">填写提示</label>
                        <input type="text" class="form-control" id="editTip" name="tip">
                    </div>
                    -->
                    <div class="form-group">
                        <label class="form-label">所属分组 <span class="text-danger">*</span></label>
                        <select class="form-control" id="editGroup" name="typeid" required>
                            <option value="1">1 - 系统基础设置</option>
                            <option value="2">2 - 调用次数限制</option>
                            <option value="3">3 - 会员价格设置</option>
                            <option value="4">4 - 支付方式设置</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">排序号 <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="editOrder" name="orders" min="0" required>
                    </div>
                    <!--
                    <div class="form-group">
                        <label class="form-label">配置值</label>
                        <input type="text" class="form-control" id="editTextValue" name="data">
                        <div id="currentImage"></div>
                    </div>
                    -->
                    <div class="form-group">
                        <label class="form-label">状态 <span class="text-danger">*</span></label>
                        <select class="form-control" id="editStatus" name="status" required>
                            <option value="0">0 - 禁用</option>
                            <option value="1">1 - 开启</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitEditBtn">保存修改</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="/static/js/jquery-3.1.0.min.js"></script>
<script src="/static/bootstrap5/js/bootstrap.bundle.min.js"></script>
<script src="/static/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // ✅ 第一步：读取 URL 参数，判断是否需要激活“管理配置”Tab
    const urlParams = new URLSearchParams(window.location.search);
    const targetTab = urlParams.get('tab'); // 拿到 ?tab=manage 参数

    // 如果参数是 manage，自动激活“管理配置”Tab
    if (targetTab === 'manage') {
        // 获取“管理配置”Tab 的按钮和内容区
        const manageTabBtn = document.getElementById('manage-config-tab');

        // 激活 Tab（调用 Bootstrap Tab 原生方法）
        const tab = new bootstrap.Tab(manageTabBtn);
        tab.show(); // 切换到“管理配置”Tab
    }
    // 原有逻辑（开关、保存按钮、提示弹窗）...
    // 1. 支付开关 - 切换时直接保存
    document.querySelectorAll('.config-toggle').forEach(toggle => {
        toggle.addEventListener('change', function() {
            const field = this.getAttribute('data-field');
            const data = this.checked ? "1" : "0"; // 开关值转为 1/0
            updateConfig(field, data);
        });
    });

    // 2. 保存按钮 - 点击时保存文本/数字输入框的值
    document.querySelectorAll('.save-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const field = this.getAttribute('data-field');
            const input = document.querySelector(`.config-input-text[data-field="${field}"]`);
            if (!input) return;

            const data = input.value.trim();
            if (!data) {
                showToast('错误', '配置值不能为空', 'error');
                return;
            }
            updateConfig(field, data);
        });
    });


    // Tab 2 管理配置的编辑/删除按钮（仅占位，后续对接逻辑）
    document.querySelectorAll('.btn-edit').forEach(btn => {
        btn.addEventListener('click', async function () {
            const field = this.getAttribute('data-field');
            const editModal = new bootstrap.Modal(document.getElementById('editConfigModal'));

            try {
                const res = await fetch(`/admin/system_config/${field}`, {
                    method: 'GET',
                    credentials: 'include'
                });
                const data = await res.json();

                if (!data.success) {
                    showToast('错误', data.msg, 'error');
                    return;
                }

                // 填充表单
                const config = data.data;
                document.getElementById('editField').value = config.field;
                document.getElementById('editTitle').value = config.title;
                //document.getElementById('editTip').value = config.tip || '';
                document.getElementById('editGroup').value = config.typeid;
                document.getElementById('editOrder').value = config.orders;
                //document.getElementById('editTextValue').value = config.data;
                document.getElementById('editStatus').value = config.status;

                editModal.show();

            } catch (error) {
                console.error('获取配置详情失败:', error);
                showToast('错误', '获取配置详情失败', 'error');
            }
        });
    });

    // 提交编辑表单
    document.getElementById('submitEditBtn').addEventListener('click', async function () {
        const form = document.getElementById('editConfigForm');
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }

        const formData = new FormData(form);

        try {
            const response = await fetch(`/admin/system_config/edit`, {
                method: 'POST',
                body: formData,
                credentials: 'include'
            });

            const resData = await response.json();

            if (resData.success) {
                showToast('成功', resData.msg, 'success');
                bootstrap.Modal.getInstance(document.getElementById('editConfigModal')).hide();
                // setTimeout(() => window.location.reload(), 1000);
                setTimeout(() => {
                    window.location.href = `${window.location.pathname}?tab=manage`;
                }, 1000);
            } else {
                showToast('错误', resData.msg, 'error');
            }
        } catch (error) {
            console.error('更新配置失败:', error);
            showToast('错误', '网络异常，请重试', 'error');
        }
    });

    document.querySelectorAll('.btn-change').forEach(btn => {
        btn.addEventListener('click', async  function() {
            const id = this.getAttribute('data-id');
            const field = this.getAttribute('data-field');
            const status = this.getAttribute('data-status');
            const status_str = status == 1 ? "禁用" : "启用";

            if (confirm(`确定${status_str}【${field}】配置项吗？`)) {
                try {
                    const formData = new FormData();
                    formData.append('id', id);
                    const response = await fetch('/admin/system_config/status', {
                        method: 'POST',
                        body: formData,
                        credentials: 'include'
                    });
                    const resData = await response.json();
                    console.log(resData);
                    if (resData.success) {
                        if (resData.status == "启用"){
                            console.log(123456);
                            showToast('', resData.msg, 'success');
                        } else {
                            showToast('', resData.msg, 'error');
                        }
                        // 刷新页面并保持在当前 Tab
                        setTimeout(() => {
                            window.location.href = `${window.location.pathname}?tab=manage`;
                        }, 500);
                    } else {
                        showToast('错误', resData.msg, 'error');
                    }
                } catch (error) {
                    console.error('删除配置失败:', error);
                    showToast('错误', '网络异常，请重试', 'error');
                }
            }
        });
    });

    // 新建配置的提交按钮
    document.getElementById('submitCreateBtn').addEventListener('click', async function() {
        const configForm = document.getElementById("createConfigForm");

        // 基础表单验证
        if (!configForm.checkValidity()) {
            configForm.reportValidity();
            return;
        }
        // 2. 收集表单数据（区分文本/文件类型）
        const formData = new FormData(configForm);
        /*
        console.log("FormData中的数据：");
           formData.forEach((value, key) => {
               console.log(`${key}: ${value}`);
           });
        */

        // 2.2 验证字段名格式（仅允许字母、数字、下划线，避免非法字符）
        const field = document.getElementById('createField').value.trim();
        const fieldReg = /^[a-zA-Z0-9_]+$/;
        if (!fieldReg.test(field)) {
            showToast('错误', '配置字段名仅允许字母、数字、下划线', 'error');
            document.getElementById('createField').focus(); // 聚焦到错误字段
            return;
        }

        // 3. 发送新增配置请求（调用后端/add接口）
        try {
            // 禁用提交按钮，防止重复点击
            submitCreateBtn.disabled = true;
            submitCreateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交中...';

            const response = await fetch('/admin/system_config/add', {
                method: 'POST',
                body: formData,
                credentials: 'include'
            });

            const resData = await response.json();
            // 4. 处理接口响应
            if (resData.success) {
                showToast('成功', resData.msg, 'success');
                // 刷新页面，显示新增的配置项
                setTimeout(() => {
                    window.location.reload();
                }, 1500); // 延迟1.5秒刷新，让用户看到成功提示
            } else {
                // 后端返回错误（如字段名已存在）
                showToast('错误', resData.msg, 'error');
            }

        } catch (error) {
            // 网络异常（如接口不可达）
            console.error('新增配置请求失败:', error);
            showToast('错误', '网络异常，请检查接口或重试', 'error');

        } finally {
            // 恢复提交按钮状态（无论成功/失败）
            submitCreateBtn.disabled = false;
            submitCreateBtn.innerHTML = '提交新增';
        }
    });



});

// 发送请求更新配置
function updateConfig(field, data) {
    // 构造表单数据（适配后端 Form 接收方式）
    const formData = new FormData();
    formData.append('field', field);
    formData.append('data', data);

    // 发送 AJAX 请求
    fetch('/admin/system_config/update', {
        method: 'POST',
        body: formData,
        credentials: 'include' // 携带登录 Cookie，确保权限验证通过
    })
    .then(response => response.json())
    .then(res => {
        if (res.success) {
            showToast('成功', res.msg, 'success');
            setTimeout(() => window.location.reload(), 500);
        } else {
            showToast('错误', res.msg, 'error');
            // 回滚输入值（避免用户看到错误值）
            rollbackInput(field);
        }
    })
    .catch(error => {
        showToast('错误', '网络异常，请刷新页面重试', 'error');
        console.error('更新配置失败:', error);
        rollbackInput(field);
    });
}

// 回滚输入框/开关到原始值（当更新失败时）
function rollbackInput(field) {
    // 回滚文本/数字输入框
    const input = document.querySelector(`.config-input-text[data-field="${field}"]`);
    if (input) {
        // 重新请求页面获取原始值（避免前端缓存）
        fetch('/admin/system_config')
        .then(res => res.text())
        .then(html => {
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html;
            const originalValue = tempDiv.querySelector(`.config-input-text[data-field="${field}"]`).value;
            input.value = originalValue;
        });
    }

    // 回滚开关
    const toggle = document.querySelector(`.config-toggle[data-field="${field}"]`);
    if (toggle) {
        fetch('/admin/system_config')
        .then(res => res.text())
        .then(html => {
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html;
            const originalChecked = tempDiv.querySelector(`.config-toggle[data-field="${field}"]`).checked;
            toggle.checked = originalChecked;
        });
    }
}

// 显示提示弹窗
function showToast(title, msg, type) {
    const toast = document.getElementById('toast');
    toast.className = `toast ${type} show`;
    toast.innerHTML = `<strong>${title}!</strong> ${msg}`;
    // 3秒后自动隐藏
    setTimeout(() => {
        toast.className = 'toast';
    }, 3000);
}
</script>
{% endblock %}